import React, { useEffect } from 'react';
import { system_realtimedata } from '../../../utils/api'

import RealtimeEcharts from '../../../components/RealtimeEcharts'

function RealtimeData(props) {

    useEffect(() => {
        system_realtimedata().then((res => {
            console.log(res);
        }))
    }, [])


    return (
        <div className='realtimedata'>
            <h2>实时数据</h2>
            <div className="data-box">
                <div className="data">
                    <div className="top">
                        <div>正在咨询人数</div>
                        <div className='num'>0</div>
                    </div>
                    <div className="bottom">
                        <span>当前在线客服数&nbsp;&nbsp;</span>
                        <span>0</span>
                    </div>
                </div>
                <div className="data">
                    <div className="top">
                        <div>正在排队人数</div>
                        <div className='num'>0</div>
                    </div>
                    <div className="bottom">
                        <span>今日排队总数&nbsp;&nbsp;</span>
                        <span>0</span>
                    </div>
                </div>
                <div className="data">
                    <div className="top">
                        <div>今日会话量</div>
                        <div className='num'>0</div>
                    </div>
                    <div className="bottom">
                        <span>今日平均响应时长&nbsp;&nbsp;</span>
                        <span>0</span>
                    </div>
                </div>
                <div className="data">
                    <div className="top">
                        <div>今日排队失败量</div>
                        <div className='num'>0</div>
                    </div>
                    <div className="bottom">
                        <span>实际接入率&nbsp;&nbsp;</span>
                        <span>0%</span>
                    </div>
                </div>
                <div className="data">
                    <div className="top">
                        <div>今日相对满意率</div>
                        <div className='num'>0%</div>
                    </div>
                    <div className="bottom">
                        <span>今日参评率&nbsp;&nbsp;</span>
                        <span>0%</span>
                    </div>
                </div>
            </div>
            <div className="echarts">
                <h3>今日在线服务数据趋势</h3>
                <RealtimeEcharts></RealtimeEcharts>
            </div>

        </div>
    );
}

export default RealtimeData;